<template>
  <div class="equipment-container">
    <div class="title">常用设备</div>
    <div class="chart-container">
      <vue-echarts :option="setOptions()"></vue-echarts>
    </div>
    <div class="bottom-container">
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-diannao1"></div>
          <div class="name">桌面设备</div>
        </div>
        <div class="item-value">{{b1}}%</div>
      </div>
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-shouji"></div>
          <div class="name">移动设备</div>
        </div>
        <div class="item-value">{{b2}}%</div>
      </div>
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-qita"></div>
          <div class="name">其他</div>
        </div>
        <div class="item-value">0%</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'equipmentChart',
  data() {
    return {
    }
  },
  props:['config'],
  computed:{
    all(){
      return this.config.PC + this.config.Mobile
    },
    b1(){
      return (((this.config.PC / this.all) +"").split('.')[1]) > 0? (((this.config.PC / this.all) +"").split('.')[1].substr(0,2).length == 2?(((this.config.PC / this.all) +"").split('.')[1].substr(0,2)):((this.config.PC / this.all) +"").split('.')[1].substr(0,2) + '0'):100
    },
    b2(){
      return (((this.config.Mobile / this.all) +"").split('.')[1])>0?(((this.config.Mobile / this.all) +"").split('.')[1].substr(0,2).length == 2?((this.config.Mobile / this.all) +"").split('.')[1].substr(0,2):((this.config.Mobile / this.all) +"").split('.')[1].substr(0,2) + '0'):100
    }
  },
  methods: {
    setOptions() {
      return {
        tooltip: {
          trigger: 'item'
        },

        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.config.PC, name: '桌面设备' },
              { value: this.config.Mobile, name: '移动设备' },
              { value: 0, name: '其他' }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.equipment-container {
  width: 100%;
  height: 100%;
  .title {
    font-size: 14px;
  }
  .chart-container {
    margin-top: 30px;
    width: 100%;
    height: 100%;
    .echarts {
      width: 288px;
      height: 259px;
    }
  }
  .bottom-container {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;

    .iconfont {
      margin-bottom: 10px;
    }
    .name {
      margin-bottom: 10px;
      font-size: 12px;
    }
    .item-value {
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 30px;
    }
  }
}
</style>
